

// console.log($)
// console.log(111);


function RenderAction(){
    //console.log(res);
    this.init()
}

$.extend(RenderAction.prototype,{
    init:async function(){
        this.cHeight           = document.documentElement.clientHeight || document.body.clientHeight;
        this.dm_container_wrap = $(".dm-container-wrap");
        var  res = await this.loadData();
        console.log(res);
        this.timer = null;
        $(window).on("scroll",$.proxy(function(){
            if(this.timer != null)  return false;
            this.timer = setTimeout($.proxy(function(){
                this.imgShow();
                this.timer = null;
            },this),1000)
        },this))
        this.renderAction(res);
        this.getImg();
    },
    renderAction:function(res){
        console.log(res);
        var html = "";
        $.each(res,function(index,item){
            html += `<div class="goods-box" >
            <a href="#" class="dm-goods-img">
                <img id="show-img" img_url="${item.verticalPic}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564321969094&di=1e69ca92d56cd8398f75c068217785c9&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fupload%2F20170715%2F7b3ce9cd49604308bdd2b7755f52cab9_th.png" width="153" height="206"/>
            </a>
            <div class="action-goods-detail">
                <div class="action-detail-title">
                    <span>${item.cityname}</span><span>${item.name}</span>
                </div>
                <div class="action-detail-address">
                    <a href="#" class="action-address-ico"></a>
                    ${item.venuecity} | ${item.venue}
                </div>
                <div class="action-detail-time">
                        <a href="#" class="action-time-ico"></a>
                        ${item.showtime}
                    </div>
            </div>
    </div>`;
        })
        $(this.dm_container_wrap).html(html);
    },
    loadData: function(){
        let res = $.ajax({
            "url": "http://localhost/dm?keyword=&cty=&ctl=&sctl=&tsg=0&st=&et=&currPage=1&tn=儿童亲子",
            "pageSize":2,
            "order":2
        }).then(async function(res){
            res = JSON.parse(res);
            //console.log(res.pageData.resultData);
            res = res.pageData.resultData;
            return await res;

        })
        return res;
    },
    getImg:function(){
        this.imgArray = Array.from($(".dm-goods-img").children("#show-img"));
        
        // console.log(this.imgArray);
        // console.log(this.dm_container_wrap);
        $.each(this.imgArray,function(index,item){
            //console.log(item.offsetTop);
            $(item).attr({"img_top":item.offsetTop})
        })
    },
    imgShow:function(){
        let scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
        $.each(this.imgArray,$.proxy(function(index,item){
             let img_top = $(item).attr("img_top");
             //console.log(this.cHeight);
            // console.log($(".goods-box").attr("img_url"),img_top);
            if((this.cHeight + scroll_top) > (img_top - 300)){
                //console.log(11111);
                this.img_url = $(item).attr("img_url");
                $(item).attr({"src":this.img_url});
            }
        },this))
    }
})




new RenderAction();

